<!--
 * @Desc: 树形组件
 * @version: v1.00
 * @Author: harry
 * @Date: 2023-8-10 21:45:31
 * @LastEditors: harry
 * @LastEditTime: 2024-04-07 20:57:16
-->
<template>
  <div class="orgTree">
    <van-checkbox-group v-model="rec.checked" :max="5">
      <van-cell-group inset>
        <van-cell
          v-for="item in treeData"
          :key="item.personId"
          :title="item.personName"
          clickable
          @click="checkedFn(item)"
          class="personName"
        >
          <van-checkbox :name="item.personName" />
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>
  </div>
</template>
<script setup name="OrgTree">
import { reactive } from "vue";
import { useStore } from "@/store";
import { Toast } from "vant";
const store = useStore();
const personsHasChecked = store.getters["setOrg/getPersons"]; // 已选中的人
const initPersons = personsHasChecked.map((i) => i.personName); // 已选中的姓名
console.log('personsHasChecked', personsHasChecked);
const rec = reactive({
  checked: initPersons || [], // 交互选中变量
  persons: JSON.parse(JSON.stringify(personsHasChecked)) || [], // 交互选中的人
});
defineProps({
  treeData: {
    type: Array,
    default: () => [],
  },
});

defineExpose({
  rec,
});

const checkedFn = (item) => {
  const { personName, personId, personMobile, tpersonId } = item;
  if (rec.checked.includes(personName) && rec.checked.length <= 5) {
    rec.persons.push({
      personName,
      personId,
      personMobile,
      tpersonId,
    });
  } else {
    rec.checked = rec.checked.filter((i) => i !== personName);
    rec.persons = rec.persons.filter((i) => i.personName !== personName);
    if (rec.checked.length === 5) {
      Toast.fail("人员不能超过5位");
    }
  }
};
</script>
<style lang="less" scoped>
:deep(.van-collapse-item__content) {
  padding-top: 0;
  padding-bottom: 0;
}
:deep(.van-cell) {
  padding: 13px 0;
  border-bottom: 0.5px solid #e1e5ea;
}
:deep(.van-collapse-item__title--expanded) {
  .van-icon-arrow {
    transform: rotate(90deg);
  }
}

.orgTree {
  /deep/ .van-cell__title {
    display: flex;
  }
  .title {
    flex: 1;
    margin-left: 2px;
  }
  .personName {
    // padding-left: 31px !important;
  }
}
.icon {
  padding: 5px;
}
/deep/ .van-checkbox-group {
  width: 100%;
  .van-checkbox {
    flex-direction: row-reverse;
  }
}
/deep/ .van-collapse-item__wrapper {
  .icon {
    padding-left: 11px;
    position: relative;
    bottom: 2px;
  }
}
</style>
